<script setup>
import {CirclePlus} from "@element-plus/icons-vue";


import {ref, watch, onMounted} from 'vue'
import {ElMessage} from "element-plus";

const userName = ref('')
const userNameList = ref([])
const props = defineProps(['userNameProps', 'userNameListProps'])
watch(props, (val) => {
  userName.value = val.userNameProps
  userNameList.value = val.userNameListProps
})
onMounted(() => {
  userName.value = props.userNameProps
  userNameList.value = props.userNameListProps
})

// watch(userNameList, (val) => {
//   console.log('watch', val)
// })

const ifUpdateName = ref(false)

const ifAddName = ref(false)

const newUserName = ref('')
const updateUserName = ref('')

// 点击修改名称
const updateName = () => {
  updateUserName.value = userName.value
  ifUpdateName.value = true
}
const yesUpdateName = () => {
  const count = userNameList.value.indexOf(userName.value)
  userNameList.value[count] = updateUserName.value
  updateUserName.value = ''
  ifUpdateName.value = false
}
const noUpdateName = () => {
  updateUserName.value = ''
  ifUpdateName.value = false
}
const yesAddName = () => {
  // 如果有重复的名称，不添加
  if (userNameList.value.indexOf(newUserName.value) !== -1) {
    newUserName.value = ''
    ElMessage.warning("不可重复添加值班人")
    return
  }
  const count = userNameList.value.indexOf(userName.value)
  userNameList.value.splice(count + 1, 0, newUserName.value)
  newUserName.value = ''
  ifAddName.value = false
}
const noAddName = () => {
  newUserName.value = ''
  ifAddName.value = false
}
const dleName = () => {
  userNameList.value.splice(userNameList.value.indexOf(userName.value), 1)
}
</script>

<template>
  <div style="display: flex; flex-direction: column;">
    <div>
      <el-space size="default">
        <template v-if="!ifUpdateName">
          <span>{{ userName }}</span>
          <el-button type="primary" @click="updateName">修改名称</el-button>
          <el-button type="danger" @click="dleName">删除</el-button>
          <el-button :icon="CirclePlus" type="primary" @click="ifAddName = true"></el-button>
        </template>
        <template v-else>
          <el-input style="width: 80px" type="text" v-model="updateUserName"></el-input>
          <el-button type="primary" @click="yesUpdateName">确定</el-button>
          <el-button @click="noUpdateName">取消</el-button>
        </template>
      </el-space>
    </div>
    <template v-if="ifAddName">
      <div style="margin-top: 15px">
        <el-space size="default">
          <el-input style="width: 130px" type="text" v-model="newUserName"></el-input>
          <el-button type="primary" @click="yesAddName">确定</el-button>
          <el-button @click="noAddName">取消</el-button>
        </el-space>
      </div>
    </template>
  </div>

</template>

<style scoped>

</style>